import Room from "./components/Room";
import TypeWriter from "./components/TypeWriter";
import Articles from "./components/Articles";

export default function page() {
  return (
    <div className="w-[calc(100% - 8px)] md:w-[82vw] mx-2 md:mx-auto">
      {/* 上半部分 */}
      <div className="flex flex-col md:flex-row items-center justify-center">
        <Room />
        <div className="text-center md:text-left mt-2 md:mt-0">
          <TypeWriter />
          <div className="animate-bounce">
            <div className="mt-10 md:mt-[350px] mx-auto w-4 h-4 md:w-8 md:h-8 border-l-4 border-b-4 border-yellow-700 rounded-[4px] -rotate-45"></div>
          </div>
        </div>
      </div>

      {/* 下半部分 */}
      <div className="w-full md:flex my-4 md:my-8 md:gap-8">
        <div className="w-full md:w-1/2">
          <div className="font-medium text-xl md:text-3xl cursor-default">
            最新文章
          </div>
          <Articles articleType={1} />
        </div>
        <div className="w-full md:w-1/2 mt-8 md:mt-0">
          <div className="font-medium text-xl md:text-3xl cursor-default flex max-md:justify-end">
            最新随记
          </div>
          <Articles articleType={2} />
        </div>
      </div>
    </div>
  );
}
